<template>
  <div class="card" :z-depth="1">
    <mu-container ref="container">
      <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
        <mu-paper
          class="lan-card"

          v-for="(item,index) in datas"
          :key=index
          @click="problemDetail(item)"
        >
          <div class="status">
            <span class="status_B"></span>
            <!--<span :class="item.status === '0'?'A-class':'B-class'">
            {{item.status === '0' ? '进行中' : '完成' }}
        </span>-->
          </div>
          <!--<div class="project">
            <span class="project_tit">项目名称：</span>
            <span class="project_name">{{item.orgName}}</span>
          </div>-->
          <div class="project">
            <span class="project_tit">检查部位：</span>
            <span class="project_name">{{item.checkParts}}</span>
          </div>
          <!--<div class="project">
        <span class="project_tit">
          所属区域：
        </span>
            <span class="project_name">
          {{item.areaName}}
        </span>
          </div>-->
          <!--<div class="project">
            <span class="project_tit">任务描述：</span>
            <span class="project_name">{{item.description}}</span>
          </div>

          <div class="project">
            <span class="project_tit">检查时限：</span>
            <span class="project_name">{{item.endTime}}</span>
          </div>
          <div class="project">
            <span class="project_tit">生效日期：</span>
            <span class="project_name">{{item.startTime}}</span>
          </div>-->
          <div class="project">
            <span class="project_tit">上次检查时间：</span>
            <span class="project_name">{{item.lastCheckTime == null ? '--' : item.lastCheckTime}}</span>
          </div>

          <section style="display: flex;justify-content: space-between">
            <!--<div class="project">
              <span class="project_tit">检查频率：</span>
              <span class="project_name">{{item.checkFrequency}}天/次</span>
            </div>-->
            <div class="project">
              <span class="project_tit">检查率：</span>
              <span class="project_name">{{item.checkRate}}%</span>
            </div>
          </section>

          <section style="display: flex;justify-content: space-between">
            <div class="project">
              <span class="project_tit">检查人：</span>
              <span class="project_name">{{item.checkUserName}}</span>
            </div>
            <div class="project">
              <!--<span class="project_tit"> 责任人：</span>-->
              <!--<span class="project_name">{{item.responsibleUserName}}</span>-->
            </div>
          </section>
        </mu-paper>
      </mu-load-more>
      <!--<p class="nodataTips">无更多数据了</p>-->
      <!--<NoData v-else/>-->
    </mu-container>
  </div>

</template>

<script>
  export default {
    name: 'ListItemCard',
    props: {
      datas: {
        type: Array,
      },
    },
    data () {
      return {
        refreshing: false,
        loading: false,
        num: 0,
      }
    },

    methods: {
      refresh () {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.$emit('loadListData');
        }, 2000)
      },
      load () {
        setTimeout(() => {
          this.loading = false;
          this.$emit('loadListData');
        }, 2000)
      },
      problemDetail (val) {
        // console.log(val);
        this.$router.push({
          path: '/Detaildf',
          query: {
            info: val.id
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .card {
    overflow-y: auto;
    height: 100%;
    .lan-card {
      overflow-y: auto;
      .status {
        display: flex;
        align-items: center;
        height: 0.35rem;
        border-bottom: 1px solid #F0F0F0;
        justify-content: space-between;
        padding: 0 0.1rem;
        .A-class {
          color: #389D2B;
        }
        .B-class {
          color: #0095FF;
        }
        .status_B {
          width: 50%;
        }
      }
      .project {
        padding: 0.05rem 0;
        .project_tit {

          font-size: 0.15rem;
          font-weight: 400;
          color: rgba(140, 140, 140, 1);
          line-height: 0.21rem;
        }
        .project_name {
          font-size: 0.15rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(61, 61, 61, 1);
          line-height: 0.21rem;
        }
      }
    }
  }
</style>

